In this recipe we find out how much of the available screen resolution can actually be used.
- Current screen dimensions:
- Available screen dimensions:
- Size of this window:
Discussion
The Screen Real Estate recipe introduced the screen object, and gave some ideas for how you might use it to make pages that adapt to the user's screen resolution. It was, however, a bit like painting a seascape: you can use several brushes, and a broad palette of aquas, blues, and greens, or you can just get a quart of blue and a roller. With this recipe we move away from the "brush and roller" school of screen painting and get into something with a little more finesse. (Some of that finesse is demonstrated in this document itself, because it's dynamically generated...see the source!)
Even though you can now determine how much of the screen you can use, your script or page probably isn't running in a window the full size of the screen. You can use window.innerWidth and window.innerHeight to determine how to lay out the contents of your page in the current window or frame. This will always work better than basing it only on the screen resolution.
Now, just when you thought it was safe to design your pages, it's time to visit another recipe so you can learn to Paint with All the Colors of the Screen.
Copyright ©2000 by Charles River Media, All Rights Reserved